<template>
  <div>
      <router-view name="shouye" ></router-view>
      <router-view name='class'></router-view>
<router-view></router-view>
      <!-- <router-view></router-view> --> 
      <!-- <router-view name='shopcart'></router-view> ../assets/weapon/class.png ../assets/weapon/shopcart.png ./assets/weapon/my.png
      <router-view name='my'></router-view>  ../assets/weapon/home.png --> 
      <div style="height: 5rem;"></div>
    <div class='tabbar'>
        <ul> 
            <li><router-link :to='{name:"shouye"}'><img :src="substrUrl=='/shouye'? require('../assets/weapon/home_active.png'):require('../assets/weapon/home.png')" alt=""><p>首页</p></router-link></li>
            <li><router-link :to='{name:"class"}'><img :src="substrUrl=='/class'? require('../assets/weapon/class_active.png'):require('../assets/weapon/class.png')"><p>分类</p></router-link></li>
            <li><router-link :to='{name:"shopcart"}'><img :src="substrUrl=='/shopcart'?require('../assets/weapon/shopcart_active.png'):require('../assets/weapon/shopcart.png')" alt=""> <p>购物车</p></router-link></li>
            <li> <router-link :to='{name:"my"}'><img :src="substrUrl=='/my'?require('../assets/weapon/my_active.png'):require('../assets/weapon/my.png')" alt=""><p>我的</p></router-link></li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
    created(){
        this.handleRoute()
    },
    mounted(){
        
    },
    data(){
        return{
           substrUrl:''
        }
    },
    methods:{
        handleRoute(){
            var index=this.$route.path.lastIndexOf('/');
        this.substrUrl=this.$route.path.substr(index);
        console.log(this.substrUrl)
        }
    },
    computed:{
        ifchoose(){
            
            return require('../assets/weapon/home.png')
        }
    },
    watch:{
        '$route':'handleRoute'
    }
}
</script>

<style lang="scss" scoped>
.router-link-active {
    text-decoration: none;
}
.tabbar{
    position:fixed;
    bottom:0;
    width: 100%;
    height:5rem;
    bottom: 0;
    margin: 0;
    background-color: #fff;;
    ul{
        list-style-type: none;
        display: flex;
        justify-content: space-between;
        text-align: center;
        padding-left: 0;
        padding-right: 13px;
        box-sizing: border-box;
        li{
            width: 33%;
            display:flex;
            flex-direction:column;
            p{
                margin: 0;
                padding-top:5px;
            }
            // height:100%;
            img{
                width:30px;
                height:30px
            }
        }
    }
}
</style>